<template>
  <view class="container">
    <header @click="$goPath(1)">
      <image src='/static/images/right-white.png' mode='aspectFit|aspectFill|widthFix' alt="" />
      <view>{{ title }}收货地址</view>
    </header>
    <section>
      <view class="address-detail">
        <view class="form-address">
          <u--form labelPosition="left" :model="areaModal" ref="uForm">
            <u-form-item label="收货人" borderBottom labelWidth="70">
              <u--input v-model="areaModal.name" border="none" placeholder="请输入收货人姓名"></u--input>
            </u-form-item>
            <u-form-item label="手机号码" borderBottom labelWidth="70">
              <u--input v-model="areaModal.phone" border="none" placeholder="请输入手机号码"></u--input>
            </u-form-item>
            <u-form-item label="所在地区" borderBottom labelWidth="70" >
              <u--input v-model="areaModal.areaDate" disabled disabledColor="#ffffff" placeholder="请选择所在地区"
                border="none"></u--input> 
              <u-icon slot="right" name="map" bold size='20' @click="addressShow = true" ></u-icon>
            </u-form-item>
            <u-form-item label="详细地址" borderBottom labelWidth="70">
              <u--input v-model="areaModal.detail" border="none" placeholder="请输入详细地址"></u--input>
            </u-form-item>
            <view class="switch">
              <view class="switch_l">
                设置为默认收货地址
              </view>
              <u-switch v-model="areaModal.isDefault"  activeColor="#32B499"></u-switch>
            </view>
          </u--form>
          <view class="submit">
            <view class="submit_button" @click="submit">保存</view>
          </view>
        </view>
      </view>
    </section>

    <address-picker :show="addressShow" closeOnClickOverlay @confirm='confirmAddress' @cancel='addressShow = false'
      @close='addressShow = false' :address-data="addressData" :indexs="indexs" :areaId="areaId"
      :type="type"></address-picker>
  </view>
</template>
<script>
import { getUserInfo } from '@/common/auth';
export default {
  data() {
    return {
      title: '',
      userId: getUserInfo().userId,
      addressShow: false,
      indexs: [],
      areaId: [],
      addressData: [],
      type: 3, //1-省，2-省市，3-省市区
      areaModal: {
        name: '',
        phone: '',
        areaDate: '',
        province: '',
        city: '',
        area: '',
        isDefault: false,
      },
    }
  },
  onLoad(options) {
    const { type, detail } = options;
    this.title = type == 'add' ? '新增' : '修改'
    if (detail && type != 'add') {
      let obj = JSON.parse(detail)
      obj.areaDate = `${obj.province}/${obj.city}/${obj.area}`
      this.addressData = [obj.province,obj.city,obj.area]
      obj.isDefault == 1 ? obj.isDefault = true : obj.isDefault = false
      this.areaModal = obj
    }
  },
  methods: {
    confirmAddress(val) {
      let arr = val.value
      this.areaModal.areaDate = arr.join('/')
      this.areaModal.province = arr[0]
      this.areaModal.city = arr[1]
      this.areaModal.area = arr[2]
      this.addressShow = false
    },

    submit() {
      const { areaModal, userId, title } = this;
      let reg = new RegExp(/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/);
      if (areaModal.name == '') return this.$toast('请填写收货人')
      if (areaModal.phone == '') return this.$toast('请填写手机号')
      if (!reg.test(areaModal.phone)) return this.$toast('请填写正确的手机号')
      if (areaModal.areaDate == '') return this.$toast('请选择省市区信息')
      if (areaModal.detail == '') return this.$toast('请完善详细地址')
      const param = {
        userId,
        id: areaModal.id,
        phone: areaModal.phone,
        name: areaModal.name,
        province: areaModal.province,
        city: areaModal.city,
        area: areaModal.area,
        isDefault: areaModal.isDefault === true ? 1 : 0,
        detail: areaModal.detail,
      };
      if (title == '新增') {
        delete param.id;
        this.$request.addressAdd(param).then(res => {
          if (res.code == 200) {
            this.$toast('添加成功!')
          }
        });
      } else {
        this.$request.addressUpdate(param).then(res => {
          if (res.code == 200) {
            this.$toast('修改成功!')
          }
        });
      }
      setTimeout(() => {
        this.$goPath(1)
      }, 800)
    },
  },


}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100vh;
  font-size: 28rpx;
  font-family: 'PingFang SC-Medium';
  background-color: #FED14E;
  overflow-y: auto;
  display: flex;
  flex-direction: column;

  header {
    width: 100%;
    padding: 120rpx 24rpx 60rpx;
    border-radius: 0 0 40rpx 40rpx;
    box-sizing: border-box;
    color: #fff;
    background-color: #32B499;
    background-image: url('https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/homeTopIcon.png');
    background-size: 100% auto;
    background-repeat: no-repeat;
    font-size: 36rpx;
    font-family: 'PingFang SC-Bold';
    display: flex;
    align-items: center;
    position: relative;
    top: 0;
    left: 0;

    image {
      width: 16rpx;
        height: 28rpx;
        display: block;
        margin-right: 12rpx;
    }

  }

  section {
    height: 100%;
    position: relative;
    top: -50rpx;
    padding: 0 24rpx;
    box-sizing: border-box;

    .address-detail {
      font-size: 30rpx;
      height: 100%;
      box-sizing: border-box;
    }

    .form-address {
      height: 100%;
      background-color: #fff;
      border-radius: 16rpx;
      padding: 24rpx;
    }

    .switch {
      margin-top: 24rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }


    .submit {
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      padding: 64rpx 30rpx 88rpx 30rpx;
    }

    .submit .submit_button {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 500rpx;
      height: 70rpx;
      background: #32B499;
      border-radius: 40rpx 40rpx 40rpx 40rpx;
      font-size: 28rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #FFFFFF;
    }


  }

}
</style>
